<template>
  <div class="ability-detail bg-gray flex-column h-100P">
    <div class="title fz-14 bg-white pd-20">
      <i class="el-icon-arrow-left fw-600 third-title" @click="handleNavBack"></i>
      <span class="main-title ">算法详情</span></div>
    <div class="flex-sub content mg-top-10 bg-white pd-20 flex-column">
      <div class="title main-title fz-18 fw-600 mg-bottom-20">基本信息</div>
      <div class="base-msg">
        <div v-for="({name,content},index) in baseMsg" :key="index" class="item">
          <div class="name align-center justify-center ">
            {{ name }}
          </div>
          <div class="content align-center  pd-left-20">
            {{ content }}
          </div>
        </div>
      </div>
    </div>
    <Detail :ability="ability"></Detail>
  </div>
</template>

<script>
import { apiFindAlgAbilityById } from '@/views/algorithm/alg-market/api'
import { apiDelAlgTaskById, apiFindTaskPageByParam } from '@/views/algorithm/alg-task/api'
import { DataStatusEnum } from '@/views/algorithm/consts'
import Detail from '@/views/algorithm/alg-task/detail'

export default {
  name: 'AbilityDetail',
  components: { Detail },
  data() {
    return {
      loading: false,
      createTaskDialogVisible: false,
      queryInfo: {
        abilityId: 'all',
        total: 0,
        pageSize: 8,
        pageNo: 1
      },
      ability: {},
      tableData: []
    }
  },
  created() {
    this.initPage()
  },
  computed: {
    baseMsg() {
      return [
        { name: '算法名称', content: this.ability.name },
        { name: '类别', content: '--' },
        { name: '绑定设备数', content: this.ability.deviceCount || 0 },
        { name: '当前执行任务', content: this.ability.workingDeviceCount || 0 },
        { name: '描述', content: this.ability.remark }
      ]
    },
    dataStatus() {
      const toList = []
      for (const [key, value] of DataStatusEnum) {
        toList.push({
          label: value,
          value: key
        })
      }
      return toList.filter(({ value }) => ['ENABLE', 'STOP'].includes(value))
    },
    DataStatusEnum() {
      return DataStatusEnum
    }
  },
  methods: {
    initPage() {
      this.queryInfo.abilityId = this.$route.query.abilityId
      this.findAlgAbilityById(this.queryInfo.abilityId)
      // this.findTaskPageByParam()
    },
    handleEdit(row) {
      this.handleNavTo('/algorithm/alg-task-detail', { taskId: row.id })
    },
    async handleDel(row) {
      this.$confirm('删除后，已绑定的设备将失去算法运行能力且无法复原，确定要删除吗？', '删除任务', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        this.loading = true
        await apiDelAlgTaskById(row.id)
        await this.findTaskPageByParam()
        this.loading = false
      })
    },
    async findAlgAbilityById(abilityId) {
      this.ability = await apiFindAlgAbilityById(abilityId)
    },
    async findTaskPageByParam() {
      const { records, pageNo, total } = await apiFindTaskPageByParam(this.queryInfo)
      this.tableData = records
      this.queryInfo.pageNo = pageNo
      this.queryInfo.total = total
    },
    handlePageNoChange() {
      this.findTaskPageByParam()
    },
    handleNavBack() {
      this.$router.back()
    },
    handleNavTo(path, query) {
      this.$router.push({ path, query })
    }
  }
}
</script>

<style scoped lang="scss">
.ability-detail {
  .title {
    .third-title {
      cursor: pointer;
    }
  }

  .base-msg {
    display: flex;
    border-right: none;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    flex-wrap: wrap;

    .item {
      display: flex;
      width: 33.33%;
      line-height: vw(24px);

      &:last-child {
        flex: 1;
      }

      .name, .content {
        padding: vw(12px) vw(20px);
        font-size: vw(14px);
      }

      .name {
        width: vw(200px);
        font-weight: bold;
        background-color: #F2F2F2;
        border-top: 1px solid #999;
        border-left: 1px solid #999;
      }

      .content {
        color: #999;
        border-top: 1px solid #999;
        border-left: 1px solid #999;
        flex: 1;
      }
    }
  }


  .alg-task {
    border: 1px solid #999999;
    padding: vw(20px);
    border-radius: 4px;
  }

  .control {
    ::v-deep {
      .el-button + .el-button {
        position: relative;
        margin-left: 0;

        &:before {
          content: '';
          position: absolute;
          display: block;
          width: 1px;
          height: 50%;
          left: 0;
          top: 55%;
          transform: translateY(-50%);
          background-color: #999;

        }
      }
    }
  }

  .add-task {
    margin-bottom: vw(20px);
  }
}
</style>
